@import "../common/var"; // 引入公共的变量文件

// 朴素按钮方法
@mixin button-plain($color){
  color: $color;
  background-color: mix($color-white,$color,90%);
  border-color: mix($color-white,$color,60%);

  // 鼠标移入、获取焦点样式
  &:hover, &:focus {
    color: $color-white;
    background-color: $color;
    border-color: $color;
  }

  // 激活
  &:active{
    color:$color-white;
    background: mix($color-white,$color,$button-active-shade-percent);
    border-color: mix($color-white, $color,$button-active-shade-percent);
    outline: none;
  }

  // 禁用
  &.is-disabled {
    &, &:hover, &:focus, &:active{
      color: mix($color-white, $color, 40%);
      background: mix($color-white, $color, 90%);
      border-color:mix($color-white, $color, 80% )
    }
  }
}

// 编写公共的btn不同类型展示颜色的方法
@mixin button-type-style($color, $bg-color, $border-color){
  color: $color;
  background-color: $bg-color;
  border-color: $border-color;

  // 鼠标经过、获取焦点样式
  &:hover,&:focus{
    color: $color;
    background-color: mix($color-white, $bg-color, $button-hover-tint-percent);
    border-color: mix($color-white, $border-color, $button-hover-tint-percent);
  }

  // 激活状态
  &:active, &is-active {
    color: $color;
    background-color: mix($color-white, $bg-color, $button-active-shade-percent);
    border-color: mix($color-white, $border-color, $button-active-shade-percent)
  }
  &:active {
    outline: none;
  }

  // 禁用
  &.is-disabled{
    &, &:hover, &:focus, &:active{
      color: $color-white;
      background-color: mix($bg-color,$color-white);
      border-color:mix($border-color,$color-white)
    }
  }

  // 朴素按钮
  &.is-plain {
    @include button-plain($bg-color) // 调用朴素按钮方法
  }
}

// 编写按钮大小的方法
@mixin button-size($padding-top-bottom, $padding-left-right, $font-size, $border-radius){
  padding: $padding-top-bottom $padding-left-right;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-top-bottom $padding-left-right;
  }
}
